I'd like to avoid manual snippets as much as possible, but I think it's unavoidable in this case.

That's understandable, but on the contrary, those snippets at least look good in the story:

while the code snipped for the default story looks like this:

I wish they were all properly formatted.

I wish they were all properly formatted.

Right 😅 The automatic code snippet engine leaves a lot to be desired. I feel like we might need to start investing more in manual code snippets, since some of them are quite inscrutable.

I wonder if we can layer prettier on top of it 😉

That's understandable, but on the contrary, those snippets at least look good in the story:

while the code snipped for the default story looks like this:

I wish they were all properly formatted.

I don't see a control to add a classname anywhere in the stories. Should we have one?

My thoughts on the className issue are here. I would prefer to align with the standard docgen behavior (i.e. allowed element props are not listed out unless explicitly highlighted).

Although if we get signals that the lack of className documentation is causing confusion, I'm also open to standardizing on "always document className explicitly".

Too much documentation is rarely an issue, while too little docs has often been an issue. In favor of extenders, I'd personally suggest proactively documenting all props, even if they're general and available for every component. Not something to block this PR though.

@tyxla , while I agree with you in general, I'm not sure it would be a good idea for our use-case. "All props" means, in many cases, every prop that the underlying HTML element can accept:

• if we list them all, the docs would become very long and it would be hard for consumers of the component to spot the "main" props;
• if we don't list them all, how do we draw a line? It feels very arbitrary and potentially even more confusing, since a user may well assume that if a prop is not listed, it can't be specified.

Can we find an alternative solution, maybe adding a paragraph where we explain that the component also accepts props X Y Z (or "every valid attribute and property for the X HTML element")?

All props might be a bit too much, I agree. But useful props folks want to use most often make sense to be documented IMHO.

Can we find an alternative solution, maybe adding a paragraph where we explain that the component also accepts props X Y Z (or "every valid attribute and property for the X HTML element")?

That could work too 👍